<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>Album example · Bootstrap v5.1</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/album/">



    <!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.1/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.1/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>


  </head>
  <body>

<header>
  <div class="collapse bg-dark" id="navbarHeader">
    <div class="container">
      <div class="row">
        <div class="col-sm-8 col-md-7 py-4">
          <h4 class="text-white">About</h4>
          <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
        </div>
        <div class="col-sm-4 offset-md-1 py-4">
          <h4 class="text-white">Contact</h4>
          <ul class="list-unstyled">
            <li><a href="#" class="text-white">Follow on Twitter</a></li>
            <li><a href="#" class="text-white">Like on Facebook</a></li>
            <li><a href="#" class="text-white">Email me</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="navbar navbar-dark bg-dark shadow-sm">
    <div class="container">
      <a href="#" class="navbar-brand d-flex align-items-center">
       <svg t="1641048570124" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5980" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FFFFFF" p-id="5981"></path><path d="M430.4 239.2h395.2c8 0 14.4 6.4 14.4 14.4s-6.4 14.4-14.4 14.4H430.4c-8 0-14.4-6.4-14.4-14.4 0.8-8 7.2-14.4 14.4-14.4zM175.2 239.2h33.6c8 0 14.4 6.4 14.4 14.4s-6.4 14.4-14.4 14.4h-33.6c-8 0-14.4-6.4-14.4-14.4s6.4-14.4 14.4-14.4zM430.4 328h395.2c8 0 14.4 6.4 14.4 14.4s-6.4 14.4-14.4 14.4H430.4c-8 0-14.4-6.4-14.4-14.4 0.8-8 7.2-14.4 14.4-14.4zM175.2 328h33.6c8 0 14.4 6.4 14.4 14.4s-6.4 14.4-14.4 14.4h-33.6c-8 0-14.4-6.4-14.4-14.4s6.4-14.4 14.4-14.4z" fill="#333333" p-id="5982"></path><path d="M332.8 404h-26.4c0-74.4 10.4-100 39.2-128l0.8-0.8c24-23.2 32-44 32-115.2h26.4c0 78.4-10.4 106.4-40 134.4l-0.8 0.8c-24 23.2-31.2 42.4-31.2 108.8zM262.4 404h-26.4c0-74.4 10.4-100 39.2-128l0.8-0.8c24-23.2 32-44 32-115.2h26.4c0 78.4-10.4 106.4-40 134.4l-0.8 0.8c-24 23.2-31.2 42.4-31.2 108.8z" fill="#FFB900" p-id="5983"></path><path d="M583.2 797.6v-24l12-0.8c88-4 164-64 188-148.8l35.2-124.8c0-1.6 0.8-2.4 0.8-4 0-8-6.4-13.6-13.6-13.6H186.4c-1.6 0-2.4 0-4 0.8-7.2 2.4-12 9.6-9.6 16.8L207.2 624C230.4 708 304 767.2 390.4 772.8l12 0.8v24c0 8 6.4 13.6 13.6 13.6h153.6c7.2 0 13.6-5.6 13.6-13.6z" fill="#D6F1FF" p-id="5984"></path><path d="M568.8 824H416c-14.4 0-26.4-12-26.4-26.4v-12c-92-6.4-170.4-69.6-194.4-158.4l-34.4-124.8c-1.6-6.4-0.8-13.6 3.2-20 3.2-6.4 8.8-10.4 16-12 2.4-0.8 4.8-0.8 7.2-0.8h618.4c14.4 0 26.4 12 26.4 26.4 0 2.4 0 4.8-0.8 7.2l-35.2 124.8c-25.6 90.4-105.6 153.6-199.2 158.4v12c-1.6 13.6-12.8 25.6-28 25.6zM186.4 493.6c-0.8 0-1.6 1.6-1.6 1.6l34.4 124.8c21.6 78.4 90.4 134.4 171.2 139.2l23.2 1.6v36c0 0.8 0.8 1.6 1.6 1.6h153.6c0.8 0 1.6-0.8 1.6-1.6v-36l24-0.8c83.2-4 154.4-60 176.8-140l35.2-124c0-1.6-0.8-1.6-1.6-1.6H186.4z" fill="#333333" p-id="5985"></path><path d="M796 590.4l-0.8 1.6h-600l-8-16v-27.2h608.8v41.6z" fill="#0072FF" p-id="5986"></path><path d="M568.8 824H416c-14.4 0-26.4-12-26.4-26.4v-12c-92-6.4-170.4-69.6-194.4-158.4l-34.4-124.8c-1.6-6.4-0.8-13.6 3.2-20 3.2-6.4 8.8-10.4 16-12 2.4-0.8 4.8-0.8 7.2-0.8h618.4c14.4 0 26.4 12 26.4 26.4 0 2.4 0 4.8-0.8 7.2l-35.2 124.8c-25.6 90.4-105.6 153.6-199.2 158.4v12c-1.6 13.6-12.8 25.6-28 25.6zM186.4 493.6c-0.8 0-1.6 1.6-1.6 1.6l34.4 124.8c21.6 78.4 90.4 134.4 171.2 139.2l23.2 1.6v36c0 0.8 0.8 1.6 1.6 1.6h153.6c0.8 0 1.6-0.8 1.6-1.6v-36l24-0.8c83.2-4 154.4-60 176.8-140l35.2-124c0-1.6-0.8-1.6-1.6-1.6H186.4z" fill="#333333" p-id="5987"></path></svg>
        <strong style="font-size: 50px">欢迎光临中区食堂</strong>
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
          <a href="/hello" style="text-decoration:none;color:#333;"><p>back</p></a>
      </button>
    </div>
  </div>
</header>

<main>

  <section class="py-5 text-center container">
    <div class="row py-lg-5">
      <div class="col-lg-6 col-md-8 mx-auto">
          <form method="post" action="/goods">

<div class="form-label-group">
              <label for="账号" class="form-label">账号</label>
              <input type="text" class="form-control" name="账号" placeholder="" value="" required="">
              <div class="invalid-feedback">
                Valid first name is required.
              </div>
            </div>
<div class="form-label-group">
              <label for="密码" class="form-label">密码</label>
              <input type="text" class="form-control" name="密码" placeholder="" value="" required="">
              <div class="invalid-feedback">
                Valid last name is required.
              </div>
            </div>

     <div class="checkbox mb-3">
    <label>
      <input type="checkbox" value="remember-me"> Remember me
    </label>
  </div>
              <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
</form>
      </div>
    </div>
  </section>



</main>



    <script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

 <footer class="text-muted py-2">
  <div class="container">
    <p class="float-end mb-2">
      <a href="hello">Back</a>
    </p>
    </div>
</footer>
  </body>
</html>
<style>
       body {
background-image: linear-gradient( #636363,#a2ab58);
  animation: bg-color 10s infinite;

  -webkit-animation: bg-color 10s infinite;

}
a{

text-decoration:none;
color:#333;
}
@keyframes bg-color {

    0% {
        background-image: linear-gradient(to right, #7F7FD5, #86A8E7, #91EAE4)
    }

    100% {
        background-image: linear-gradient(to right, #91EAE4, #6be585)
    }
}
</style>